<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="css/allBasic.css">
    <link rel="stylesheet" href="css/sitePage.css">
    <!--<link rel="stylesheet" href="css/mainpage.css">-->
    <title>首页</title>
</head>
<body>
<div class="page_box mpg">
    <div class="page_box_head title_color1">
        <span class="page_title_sign"><i class="iconfont">&#xe6c1;</i></span>
        <h3 class="page_title">个人概要<span>Personal Information</span></h3>
    </div>
    <div class="page_box_content clearfix person">
        <div class="module l">
            <div class="uface"></div>
            <ul class="uinfos">
                <li>
                    <span class="name blue_t">张三</span>
                    <span class="state">vip2</span>
                </li>
                <li>
                   推荐人：张三
                </li>
                <li class="push_ewm blue_t">
                    <i class="iconfont">&#xe6c5;</i>查看二维码
                    <div class="hides">
                        <img src="img/11686.png">
                    </div>
                </li>
            </ul>
        </div>
        <div class="module ctr">
            <ul class="uinfos buy">
                <li class="name blue_t">
                   当前级别:
                </li>
                <li class="buy_area">
                    <span class="price">50000</span>(元)<a href="" class="up">升级</a>
                </li>
                <!--<li class="ends"></li>-->
            </ul>
        </div>
    </div>
    <div class="page_box_head title_color2">
        <span class="page_title_sign"><i class="iconfont">&#xe6c1;</i></span>
        <h3 class="page_title">积分详情<span>Integral detail</span></h3>
    </div>
    <div class="page_box_content clearfix ward">
        <div class="module left clearfix">
            <h4 class="module_name title_color2">积分数情况:</h4>
            <table class="mpgtb title_color2 l">
                <tr>
                    <td>现金钱包：</td>
                    <td>￥8888.22</td>
                </tr>
                <tr>
                    <td>注册币：</td>
                    <td>￥8888.22</td>
                </tr>
                <tr>
                    <td>电子币：</td>
                    <td>￥8888.22</td>
                </tr>
                <tr>
                    <td>P点：</td>
                    <td>￥8888.22</td>
                </tr>
                <tr>
                    <td>G币：</td>
                    <td>￥8888.22</td>
                </tr>
                <tr>
                    <td>激活码：</td>
                    <td>123456789qwqweee</td>
                </tr>
                <tr>
                    <td>商城币：</td>
                    <td>￥8888.22</td>
                </tr>
                <tr>
                    <td>汽车币：</td>
                    <td>￥8888.22</td>
                </tr>
            </table>
            <div class="r x_scroll">
                <div class="chart" id="chart2" style="height:250px;"></div>
            </div>
        </div>
    </div>
    <div class="page_box_head title_color3">
        <span class="page_title_sign"><i class="iconfont">&#xe6c1;</i></span>
        <h3 class="page_title">新闻公告<span>News</span></h3>
    </div>
    <div class="page_box_content ">
        <ul class="news_area">
            <li>
                <a href="newsContent.html" class="ntxt">新闻公告新闻公告新闻公告新闻公告新闻公告新闻公告新闻公告00</a>
                <time class="time">--2016-12-03</time>
            </li>
            <li>
                <a href="newsContent.html" class="ntxt">新闻公告</a>
                <time class="time">--2016-12-12</time>
            </li>
        </ul>
    </div>
    <div id="chart1" style="height:220px;"></div>
</div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="../public/js/echarts.min.js"></script>
<script src="js/siteBasic.js"></script>
<script>
     window.addEventListener("message",function(e){
         console.log("mainpage:"+e.data);
     });
    $().ready(function(){
        newsLimit(".news_area .ntxt",25);
        showChart2();
        showCodeImg(".push_ewm");
        showChart1();
    });
    function showChart2(){
        var mychart=echarts.init(document.getElementById("chart2"));
        var option={
            title: {
                text: ''
            },
            tooltip: {},
            radar: {
                name: {
                    textStyle: {
                        color: '#5c6bc0',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                axisLine:{
                  show:false
                },
                splitLine:{
                    lineStyle:{
                       color:"#7cc1f8"
                    }
                },
                splitArea:{
                   show:true,
                    areaStyle:{
                       color:"transparent"
                    }
                },
                indicator: [
                    { name: '现金钱包'},
                    { name: '注册币'},
                    { name: 'G币'},
                    { name: '激活码'},
                    { name: '汽车币'},
                    { name: '商城币'},
                    { name: 'P点'},
                    { name: '电子币'}
                ]
            },
            radarIndex: 1,
            series: [{
                name: '',
                type: 'radar',
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: 'default'
                        },
                        borderColor:"#608cd5"
                    }
                },
                areaStyle: {
                    normal: {
                        color: "#cbbaf9",
                        opacity:.8
                    }
                },
                lineStyle:{
                    normal:{
                        color:"#608cd5"
                    }
                },
                data: [
                    {
                        value: [4300, 10000, 28000, 35000, 50000, 19000, 10, 30],
                        name: '积分数情况'
                    }
                ]
            }]
        };
        mychart.setOption(option);
    }
    function  showCodeImg(obj){
        $(obj).on("mouseenter",function(){
            $(this).find(".hides").addClass("active");
        }).on("mouseleave",function(){
            $(this).find(".hides").removeClass("active");
        }).on("click",function(){
            $(this).find(".hides").toggleClass("active");
        });
    }
     function showChart1(){
         var mychart=echarts.init(document.getElementById("chart1"));
         var option={
             title: {
                 text: '',
                 textStyle:{
                     color:"#444",
                     fontSize:20
                 }
             },
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
                     type: 'shadow'
                 }
             },

             xAxis: {
                 type: 'value',
                 boundaryGap: [0, 0.01],
                 axisLabel:{
                     interval:0,
                     rotate:45,
                     margin:2,
                     textStyle:{
                         color:"#222"
                     }
                 }
             },
             grid: { // 控制图的大小，调整下面这些值就可以，
                 x: 60,
                 x2: 60,
                 y2: 60// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
             },
             yAxis: {
                 type: 'category',
                 data: ['团队业绩','挂单业绩']
             },
             series: [
                 {
                     type: 'bar',
                     data: [{
                         value:500000,
                         itemStyle:{
             normal:{
                 color:{
                     type:"linear",
                         x:0,
                         y:0,
                         x2:1,
                         y2:1,
                         colorStops:[{
                         offset:0,color:"#a4dbff"
                     },{
                         offset:1,color:"#0292ef"
                     }]
                 }
             }
         }
     },
         {
             value:600000,
             itemStyle:{
                 normal:{
                     color:{
                         type:"linear",
                             x:0,
                             y:0,
                             x2:1,
                             y2:1,
                             colorStops:[{
                             offset:0,color:"#a4dbff"
                         },{
                             offset:1,color:"#0292ef"
                         }]
                     }
                 }
             }
         }
     ],
         label:{
             normal:{
                 show:true,
                     position:'right',
                     padding:[0,25,0,0]
             }
         }
     }
     ]
     };

         mychart.setOption(option);
     }
</script>
</html>